<template>
	<view class="sku_content">
		<view class="item_content" v-for="(item, index) in specList" :key='index'>
			<view class="title">{{item.specName}}</view>
			<view class="content">
				<text @click="click(spec, index, index2)" class="default" :class="spec.select ? 'spec_sel' : 'spec'"
					v-for="(spec, index2) in item.specValueList" :key='index2'>{{spec.name}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			specList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				lastItem: {}
			}
		},
		methods: {
			click(spec, index, index2) {
				console.log('点击了', index, spec)
				this.$emit('click', spec, index, index2)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.sku_content {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;

		.item_content {
			display: flex;
			flex-direction: column;
			margin-bottom:20rpx;

			.title {
				color: #333333;
				font-weight: bold;
			}

			.content {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.default {
					margin: 20rpx 0;
					padding: 0 35rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 10rpx;
					margin-right: 30rpx;
					font-size: 26rpx;
				}

				.spec {
					background-color: #EEEEEE;
					border: #EEEEEE 1px solid;
				}

				.spec_sel {
					background-color: #fefefe;
					border: #FC5E53 1px solid;
					color: #FC5E53 !important;
				}
			}
		}
	}
</style>
